<template>
    <div>
        <div> <el-button type="primary" @click="openCreaeteDialog">点击打开创建弹窗</el-button> </div>

        <el-table :data="tableData" v-loading="loading">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in colunm" :key="index">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100px">
                <template v-slot="scope">
                    <span class="cursor" @click="updateDialog(scope.row)">修改</span>
                    <span class="cursor" style="margin-left: 10px;" @click="handelChuli">处理</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 打开创建弹窗 -->
        <el-dialog title="创建" v-model="CreatedialogVisible" append-to-body destroy-on-close>
            <Create @creaeteSuccess="creaeteSuccess" @close="close" />
        </el-dialog>
        <el-dialog title="修改" v-model="UpdatedialogVisible" append-to-body destroy-on-close>
            <Edit :data="data" @close="close" @updateSuccess="updateSuccess" />
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import Create from './components/Create.vue'
import Edit from './components/Edit.vue'
const colunm = ref([
    {
        label: '姓名',
        prop: 'name',
    },
    {
        label: '性别',
        prop: 'sex',
    },
])

const tableData = ref([
    {
        sex: '男',
        name: 'Tom',
    },
    {
        sex: '男',
        name: '段红运',
    },
    {
        sex: '女',
        name: '焦凯航',
    },

])
// loading
const loading = ref(false)

// 创建逻辑
const CreatedialogVisible = ref(false)

// 打开创建的弹窗事件
function openCreaeteDialog() {
    CreatedialogVisible.value = true
}

// 创建成功

function creaeteSuccess(data) {
    console.log('创建成功', data)
}

const data = ref(null)
const UpdatedialogVisible = ref(false)
// 打开修改的弹窗事件
function updateDialog(row) {
    data.value = row
    UpdatedialogVisible.value = true
}
// 修改成功的事件回调
function updateSuccess(data) {
    console.log('修改成功', data)
}

// 公共方法close
function close() {
    CreatedialogVisible.value = false
    UpdatedialogVisible.value = false
}

// 处理事件
function handelChuli() {
    loading.value = true
    setTimeout(() => {
        ElMessage.success('处理成功')
        loading.value = false
    }, 2000)
}


</script>

<style>
.cursor {
    cursor: pointer;
}
</style>